<template>
  <a-modal 
    :title="title" 
    :width="800" 
    :visible="visible" 
    :confirm-loading="confirmLoading" 
    cancel-text="关闭" 
    @ok="submit" 
    @cancel="closeModal"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="手机号">
          <a-input disabled v-decorator="['mobile', validatorRules.mobile ]" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="姓名">
          <a-input disabled v-decorator="['name', validatorRules.name ]" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="职位">
          <a-input disabled v-decorator="['position', validatorRules.position ]" placeholder="请输入职位" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="从业年限">
          <a-input disabled v-decorator="['years', validatorRules.years ]" placeholder="请输入从业年限" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="所属店铺">
          <a-input disabled v-decorator="['merchantName', validatorRules.merchantName ]" placeholder="请输入所属店铺" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="擅长">
          <template v-for="tag in tags">
            <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
              <a-tag color="blue" :key="tag" closable @close="() => handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </a-tag>
            </a-tooltip>
            <a-tag color="blue" v-else :key="tag" closable @close="() => handleClose(tag)">
              {{ tag }}
            </a-tag>
          </template>
          <template>
            <a-input
              v-if="inputVisible && tags.length < 3"
              ref="input"
              type="text"
              size="small"
              :style="{ width: '200px' }"
              :value="inputValue"
              @change="handleInputChange"
              @blur="handleInputConfirm"
              @keyup.enter="handleInputConfirm"
            />
            <a-tag v-if="!inputVisible && tags.length < 3" style="background: #fff; borderStyle: dashed;" @click="showInput">
              <a-icon type="plus" /> 新擅长
            </a-tag>
          </template>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/personnel/techList';
import { Slime } from '@/mixins/slime';
export default {
  name: 'techListModal',
  data() {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      model: {},
      validatorRules: {
        mobile: { rules: [{ required: true, message: '请输入电话!' }] },
        name: { rules: [{ required: true, message: '请输入姓名!' }] },
        position: { rules: [{ required: true, message: '请输入职位!' }] },
        years: { rules: [{ required: true, message: '请输入从业年限!' }] },
        merchantName:  { rules: [{ required: true, message: '请输入店铺名!' }] },
      },
      id: 0,
      //tag
      tags: [],
      inputVisible: false,
      inputValue: '',
    };
  },
  mixins: [Slime],
  methods: {
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      this.form.resetFields(); //重新设置领域
      this.visible = true;
      ApiTree.getDetail(record.id)
        .then((res) => {
          let data = res.result
          this.id = data.id;
          this.form.setFieldsValue({
            mobile: data.mobile,
            name: data.name,
            position: data.position,
            years: data.years,
            merchantName: data.merchant.name,
          });
          this.tags = data.skill ? data.skill.split(',') : []
        })
        .finally(() => {
        });
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let param = { 
            skill: that.tags.join(","),
          };
          if (!that.id) {
            // that.submitCreate(param);
          } else {
            param = {...param, id:that.id}
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    // submitCreate(param) {
    //   const that = this;
    //   ApiTree.getAdd(param)
    //     .then((res) => {
    //       that.$message.success('新增成功');
    //     })
    //     .finally(() => {
    //       that.closeModal();
    //     });
    // },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    handleClose(removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag);
      this.tags = tags;
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function() {
        this.$refs.input.focus();
      });
    },
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    handleInputConfirm() {
      const inputValue = this.inputValue;
      let tags = this.tags;
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
      }
      console.log(tags);
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: '',
      });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields();
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>